<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生js记事本案例</title>
</head>
  <style>
    .box {
        margin: 100px auto;
        width: 515px;
        height: auto;
        border: 1px solid black;
        
        
    }
    input[type = 'text'] {
        transform: translate(25px);
        margin-top: 10px;
        width: 435px;
        height: 40px;
        outline: none;

    }
    li {
        list-style: none;
    }
    .uls {
       padding: 0px;
       transform: translate(25px,10px);
       height: auto;
    }
    .uls li {
        position: relative;
        width: 435px;
        padding: 10px;
        border: 1px solid black;

    }
    .uls li:nth-of-type(n+2) {
        border-top: none;
    } 
    button {
        display: none;
        position: absolute;
        right: 5px;
        top: 5px;
        height: 30px;
        outline: none;
        background-color: lightcoral;
        
    }
    li:hover {
        background-color: darkorange;
    }
    h1 {
        display: block;
        transform: translate(25px);
    }
    li:hover button {
     display: block;
     
    }
  </style>
<body>
   <script>
       window.addEventListener('load',(event)=>{

          let i=0;
          let j=0;
          let int2;
          let btn;
          const int1 = document.getElementsByTagName('input')[0] ;
          const uls = document.querySelector('.uls') ;
          const sp = document.getElementsByClassName('sp')[0];
          const spa = document.getElementsByClassName('spa')[0];
          const lis = document.getElementsByTagName('li');

          int1.onkeydown = function (event) {
              if(event.key==='Enter') {
                 const ele = document.createElement('li');
                 ele.innerHTML = `<input type="checkbox" name="hello" value="">
                  ${int1.value}<button>删除</button>`
                 uls.appendChild(ele)
                 i++;
                 sp.innerHTML = i;
                 
              }
          }
        

         
        uls.onmousedown = function (event) {

             int2 = document.querySelectorAll('input[name="hello"]')
             btn = document.getElementsByTagName('button')

            if(event.target.name == 'hello') {  //只有点击的name为hello的控件才有反应
                for(let i=0;i<int2.length;i++) {
                 int2[i].onclick = function () {
                 if(int2[i].checked) {
                    j++;
                   lis[i].style.backgroundColor = "gray";
                   btn[i].innerText = '清除已完成'
                 }
                 else {
                     j--
                     lis[i].style.backgroundColor = "lightgray";
                     btn[i].innerText = '删除'
                 }
               spa.innerHTML = j;
             }
         }        
            }


           for(let k=0;k<btn.length;k++) {
               btn[k].onmouseup = function () {
                   //对有多选框是否选中做判断 ,如果没选中直接删除 
                   //选中了则让j--，j重新赋值给html再删除
                if(!int2[k].checked) {
                    lis[k].remove();  //删除dom操作
                    }
                    else {
                    j--;
                    spa.innerHTML = j;
                    lis[k].remove();
                    }
                    i--;
                    sp.innerHTML = i;
                   
                //    uls.removeChild(lis[j])  //语法 ： 父节点.removeChild(子节点)
               }
           }
        }

       },false)

   </script> 

   <div class="box">
       <input type="text" placeholder="请添加任务,按下回车键确认" style="padding-left: 15px;">
       <ul class="uls">
        <!-- <li><input type="checkbox" name="hello" value="" >打代码<button>删除</button></li>
        <li><input type="checkbox" name="hello" value="">打游戏<button>删除</button></li> -->
       </ul>
       <h1>已完成<span class="spa">0</span>/全部<span class="sp">0</span></h1>
       
    </div>
</body>
</html>